<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>心情指数</title>
    <style>
        img {
            height: 50px;
            width: 50px;
        }
        #star{
            width: 400px;
            margin: 50px auto;
        }
        #content{
            font-size: 20px;
            width: 400px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div id="content">您今天心情指数是：</div>
<div id="star"></div>

<script src="../js/jquery-3.2.1.js"></script>
<script>
    $.ajax({
        url: "/moodindex",
        type: "post",
        success: function (result) {
            var data = result.data;
            var score = data.score;
            if (score >= 0 && score <= 5) {
                $("#star").append("<img src=\"../imgs/star.png\">" +
                    "<img src=\"../img/star.png\">" +
                    "<img src=\"../img/star.png\">" +
                    "<img src=\"../img/star.png\">" +
                    "<img src=\"../img/star.png\">");
            } else if (score > 5 && score <= 10) {
                $("#star").append("<img src=\"../imgs/star.png\">" +
                    "<img src=\"../img/star.png\">" +
                    "<img src=\"../img/star.png\">" +
                    "<img src=\"../img/star.png\">");
            } else if (score > 10 && score <= 15) {
                $("#star").append("<img src=\"../imgs/star.png\">" +
                    "<img src=\"../img/star.png\">" +
                    "<img src=\"../img/star.png\">");
            } else if (score > 15 && score <= 20) {
                $("#star").append("<img src=\"../imgs/star.png\">" +
                    "<img src=\"../img/star.png\">");
            } else if (score > 20) {
                $("#star").append("<img src=\"../img/star.png\">");
            }
        }
    })
</script>
</body>
</html>
